<template>
	<view class="customize-container page-container">

		<!-- 定制介绍 -->
		<view class="intro-section">
			<image :src="$tools.buildUrl('/static/images/customize-banner.jpg')" mode="widthFix" class="intro-image">
			</image>
			<view class="intro-content">
				<text class="intro-title">专属定制，独一无二</text>
				<text class="intro-desc">为您量身定制专属茶叶，从包装设计到茶叶配比，打造独一无二的茶叶产品。</text>
			</view>
		</view>

		<!-- 定制类型 -->
		<view class="type-section">
			<view class="section-title">
				<text class="title-text">定制类型</text>
			</view>
			<view class="type-grid">
				<view class="type-item" v-for="(item, index) in customTypes" :key="index"
					:class="{ active: selectedType === index }" @click="selectType(index)">
					<image v-if="item.article_images && item.article_images.length>0"
						:src="$tools.buildUrl(item.article_images[0].url)" mode="aspectFill" class="type-image"></image>
					<view class="type-info">
						<text class="type-title">{{ item.article_title }}</text>
						<text class="type-desc">{{ item.article_abstract }}</text>
						<text class="type-price">起订量：100</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 定制流程 -->
		<view class="process-section">
			<view class="section-title">
				<text class="title-text">定制流程</text>
			</view>
			<view class="process-steps">
				<view class="step-item" v-for="(step, index) in processes" :key="index">
					<view class="step-number">{{ index + 1 }}</view>
					<view class="step-content">
						<text class="step-title">{{ step.title }}</text>
						<text class="step-desc">{{ step.desc }}</text>
					</view>
					<view class="step-arrow" v-if="index < processes.length - 1">
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 定制案例 -->
		<!-- <view class="case-section">
			<view class="section-title">
				<text class="title-text">定制案例</text>
			</view>
			<view class="case-list">
				<view class="case-item" v-for="(item, index) in cases" :key="index">
					<image :src="item.image" mode="aspectFill" class="case-image"></image>
					<view class="case-overlay">
						<text class="case-title">{{ item.title }}</text>
						<text class="case-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 定制优势 -->
		<view class="advantage-section">
			<view class="section-title">
				<text class="title-text">定制优势</text>
			</view>
			<view class="advantage-list">
				<view class="advantage-item" v-for="(item, index) in advantages" :key="index">
					<view class="advantage-icon">
						<u-icon :name="item.icon" size="28" color="#1c705e"></u-icon>
					</view>
					<view class="advantage-content">
						<text class="advantage-title">{{ item.title }}</text>
						<text class="advantage-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 定制表单 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">定制需求</text>
			</view>
			<view class="form-content">
				<view class="form-item">
					<text class="form-label">联系人</text>
					<input class="form-input" placeholder="请输入您的姓名" v-model="formData.contact_name" />
				</view>
				<view class="form-item">
					<text class="form-label">联系电话</text>
					<input class="form-input" placeholder="请输入您的手机号" v-model="formData.contact_tel" />
				</view>
				<view class="form-item">
					<text class="form-label">定制类型</text>
					<view class="form-select" @click="showTypeSelector">
						<text
							class="select-text">{{ selectedType >= 0 ? customTypes[selectedType].article_title : '请选择定制类型' }}</text>
						<u-icon name="arrow-down" size="16" color="#999"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">定制数量</text>
					<input class="form-input" placeholder="请输入定制数量" v-model="formData.customize_num" type="number" />
				</view>
				<view class="form-item">
					<text class="form-label">定制需求</text>
					<textarea class="form-textarea" placeholder="请详细描述您的定制需求，包括包装设计、茶叶配比、特殊要求等"
						v-model="formData.contact_text" maxlength="500"></textarea>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="action-btn secondary" @click="makeCall">电话咨询</button>
			<button class="action-btn primary" @click="submitCustom">提交定制</button>
		</view>

		<!-- 定制类型选择弹窗 -->
		<u-popup :show="typeSelectorShow" mode="bottom" border-radius="20" @close="typeSelectorShow = false">
			<view class="type-selector">
				<view class="selector-header">
					<text class="selector-title">选择定制类型</text>
					<u-icon name="close" size="20" color="#999" @click="typeSelectorShow = false"></u-icon>
				</view>
				<view class="selector-list">
					<view class="selector-item" v-for="(item, index) in customTypes" :key="index"
						@click="confirmType(index)">
						<text class="selector-text">{{ item.article_title }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				selectedType: -1,
				typeSelectorShow: false,
				formData: {
					form_type: 1, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
					article_id: '',
					contact_name: '',
					contact_tel: '',
					customize_num: '',
					contact_text: ''
				},
				loading: false,
				// 定制类型
				customTypes: [],
				// 定制流程
				processes: [{
						title: '需求沟通',
						desc: '详细了解您的定制需求'
					},
					{
						title: '方案设计',
						desc: '制定专属定制方案'
					},
					{
						title: '样品确认',
						desc: '提供样品供您确认'
					},
					{
						title: '批量生产',
						desc: '确认后进行批量生产'
					},
					{
						title: '质检发货',
						desc: '严格质检后安排发货'
					}
				],
				// 定制案例
				cases: [{
						title: '某知名企业年会定制',
						desc: '为企业年会定制专属茶叶礼品，包装精美，寓意深远',
						image: 'https://img-lbc.shoplnk.cn/static/images/case-enterprise.jpg'
					},
					{
						title: '高端婚庆茶叶定制',
						desc: '为新人定制专属婚庆茶叶，包装典雅，意义非凡',
						image: 'https://img-lbc.shoplnk.cn/static/images/case-wedding.jpg'
					},
					{
						title: '春节礼品茶定制',
						desc: '春节专属礼品茶，传统文化与现代设计完美结合',
						image: 'https://img-lbc.shoplnk.cn/static/images/case-festival.jpg'
					}
				],
				// 定制优势
				advantages: [{
						icon: 'star',
						title: '专业设计',
						desc: '专业设计团队，为您打造独特包装'
					},
					{
						icon: 'leaf',
						title: '优质茶源',
						desc: '精选优质茶叶，确保产品品质'
					},
					{
						icon: 'setting',
						title: '个性配比',
						desc: '根据需求调整茶叶配比和口感'
					},
					{
						icon: 'gift',
						title: '精美包装',
						desc: '高档包装材料，提升产品档次'
					}
				]
			}
		},
		computed: {
			...mapGetters(['dealerInfo'])
		},
		onLoad(options) {
			this.loadDataList()
		},
		methods: {
			loadDataList() {
				this.$api.good.GetArticleList({
					page: 1,
					limit: 20,
					article_type: 9
				}).then(res => {
					this.customTypes = res.data
					this.customTypes.forEach(item => {
						item.article_images = this.$tools.parseJsonObject(item.article_images)
					})
				})
			},

			// 选择定制类型
			selectType(index) {
				this.selectedType = index
				this.formData.article_id = this.customTypes[index].id
				this.formData.contact_images = this.customTypes[index].article_images
			},

			// 显示类型选择器
			showTypeSelector() {
				this.typeSelectorShow = true
			},

			// 确认类型选择
			confirmType(index) {
				this.selectedType = index
				this.typeSelectorShow = false
				this.formData.article_id = this.customTypes[index].id
				this.formData.contact_images = this.customTypes[index].article_images
			},

			// 拨打电话
			makeCall() {
				if (this.dealerInfo.shop_tel && this.dealerInfo.shop_tel != '') {
					uni.makePhoneCall({
						phoneNumber: this.dealerInfo.shop_tel
					})
				} else {
					uni.showToast({
						title: '暂未设置客服电话',
						icon: 'none'
					})
				}
			},

			// 提交定制需求
			submitCustom() {
				if (this.loading) {
					return
				}
				// 表单验证
				if (!this.formData.contact_name) {
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					})
					return
				}

				if (!this.formData.contact_tel) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}

				if (this.selectedType < 0) {
					uni.showToast({
						title: '请选择定制类型',
						icon: 'none'
					})
					return
				}

				if (!this.formData.customize_num || !this.formData.customize_num < 0) {
					uni.showToast({
						title: '请输入定制数量',
						icon: 'none'
					})
					return
				}

				if (!this.formData.contact_text) {
					uni.showToast({
						title: '请描述定制需求',
						icon: 'none'
					})
					return
				}

				// 提交定制需求
				this.loading = true
				uni.showLoading({
					title: '提交中...'
				})
				this.$api.good.AddContact(this.formData).then(res => {
					// 清空表单
					this.formData = {
						form_type: 1, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
						article_id: '',
						contact_name: '',
						contact_tel: '',
						customize_num: '',
						contact_text: ''
					}
					this.selectedType = -1
					this.loading = false
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				}).catch(err => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customize-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.intro-section {
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.intro-image {
		width: 100%;
		height: 400rpx;
	}

	.intro-content {
		padding: 40rpx;
	}

	.intro-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.intro-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		display: block;
	}

	.type-section,
	.process-section,
	.case-section,
	.advantage-section,
	.form-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-title {
		margin-bottom: 40rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.type-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.type-item {
		width: 48%;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.type-item.active {
		border-color: #1c705e;
	}

	.type-image {
		width: 100%;
		height: 200rpx;
	}

	.type-info {
		padding: 20rpx;
	}

	.type-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.type-desc {
		font-size: 22rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}

	.type-price {
		font-size: 22rpx;
		color: #1c705e;
		font-weight: bold;
		display: block;
	}

	.process-steps {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.step-item {
		width: 18%;
		text-align: center;
		position: relative;
	}

	.step-number {
		width: 60rpx;
		height: 60rpx;
		background-color: #1c705e;
		color: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		margin: 0 auto 16rpx;
	}

	.step-content {
		text-align: center;
	}

	.step-title {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.step-desc {
		font-size: 20rpx;
		color: #666;
		display: block;
	}

	.step-arrow {
		position: absolute;
		top: 30rpx;
		right: -20rpx;
	}

	.case-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.case-item {
		width: 48%;
		height: 300rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.case-image {
		width: 100%;
		height: 100%;
	}

	.case-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
		padding: 30rpx 20rpx 20rpx;
		color: #ffffff;
	}

	.case-title {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		display: block;
	}

	.case-desc {
		font-size: 22rpx;
		opacity: 0.9;
		display: block;
	}

	.advantage-list {
		margin-top: 20rpx;
	}

	.advantage-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.advantage-item:last-child {
		margin-bottom: 0;
	}

	.advantage-icon {
		margin-right: 20rpx;
		margin-top: 8rpx;
	}

	.advantage-content {
		flex: 1;
	}

	.advantage-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.advantage-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.form-content {
		margin-top: 20rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.form-input {
		width: 100%;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.form-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
	}

	.form-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #e5e5e5;
		padding: 30rpx;
		display: flex;
	}

	.action-btn {
		flex: 1;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
	}

	.action-btn.primary {
		background-color: #1c705e;
		color: #ffffff;
	}

	.action-btn.secondary {
		background-color: transparent;
		color: #1c705e;
		border: 2rpx solid #1c705e;
	}

	.type-selector {
		padding: 40rpx;
	}

	.selector-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.selector-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.selector-list {
		margin-top: 20rpx;
	}

	.selector-item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.selector-item:last-child {
		border-bottom: none;
	}

	.selector-text {
		font-size: 28rpx;
		color: #333;
	}
</style>